Learning JavaScript and HTML coding through my Senior Highschool year. I cannot figure out why this error is occurring for the life of me. Can someone help me with this? Thank you so much!
Assignment for clarity: Using only JavaScript, add a list item to the Calendar that you need to complete from your list of chores.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
td{
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<table border = "1" id= "chores">
<tr id = "days">
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr id = "tasks">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var extraTask = document.createElement("li");
extraTask.innerHTML = "Take dishes out of dishwasher";
var extraTaskList = document.createElement("ul");
extraTaskList.child = extraTask;
var tasksRow = document.getElementById("tasks").children;
tasksRow = tasksRow[3];
var tableContainer = document.getElementById("chores");
document.tasksRow.appendChild(extraTaskList);
</script>
</body>
</html>
The visual created by the code: https://i.stack.imgur.com/GEUZG.png
Change document.tasksRow to tasksRow.
Also, use appendChild to append an element.
<!DOCTYPE html>
<html>
<head>
<style>
td{
height: 150px;
width: 150px;
}
</style>
</head>
<body>
<table border = "1" id= "chores">
<tr id = "days">
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr id = "tasks">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script>
var extraTask = document.createElement("li");
extraTask.innerHTML = "Take dishes out of dishwasher";
var extraTaskList = document.createElement("ul");
extraTaskList.appendChild(extraTask);
var tasksRow = document.getElementById("tasks").children;
tasksRow = tasksRow[3];
var tableContainer = document.getElementById("chores");
tasksRow.appendChild(extraTaskList);
</script>
</body>
</html>